iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
2
Modern Web

🍐放學後的網頁開發系列 第 8

[Day8] 柚子放學後的網頁生活 - Vue.js

  • 分享至 

  • xImage
  •  

結束了ES6,接著進入Vue的世界囉

Why 前端框架

  • 幫助我們把資料對應成HTML
  1. 像是用JS定義物件,陣列存商品相關資訊,將資料另外寫成JS而非寫入HTML,目的是想在未來調整或是做外部資料寫入時更為方便,就不用在改Html,但常常這樣定義來定義去搞得很混亂
  2. 資料非常多時,太多div或是要一直複製搞得js裡寫得很長

這時候就是前端框架上場的時候了,幫助你把模板寫在Html

現代有很多前端框架舉凡Angular、Vue、React,我選擇Vue

Why Vue

Vue和Angular類似,都可以達到資料分離、全部畫面同步更動等效果,那像是Angular比較偏向前後端一起做,功能完善但寫起來也比較麻煩,加上Vue比較輕量,相信你可以更快得到的feedback

STEP 1 - Build a HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Vue's World</title>
    </head>
    <body>
        <p>Let's Start!</p>
    </body>
</html>

STEP 2 - A Hello World with Vue # {{ }}

寫程式能懶即懶,所以直接用*CDN做import就好,省時省力

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//此為開發者version,包含console warnings.

?CDN(Content delivery network):
中文名為內容傳遞網路,那直接從這個詞去聯想=>將內容在網路上傳輸的快取機制
換句話說,連上一個網站等同連上這個網站所在Server,因此不用重新向伺服器Request,那Sever架在哪裡都不會影響用戶讀取網站的速度,像是Vue, Jquery, Bootstrap等都有使用CDN服務,User就可以依佈有CDN最近國家存取,補充 : https://zh.wikipedia.org/wiki/%E5%85%A7%E5%AE%B9%E5%82%B3%E9%81%9E%E7%B6%B2%E8%B7%AF

廢話不多說,網站寫起來

建立一個最簡單的網站,帶有id設為dayo的div,這div等等會以Vue的方式操作

<!DOCTYPE html>
<html>
    <head>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <meta charset="UTF-8">
        <title>Hello Vue's World</title>
    </head>
    <body>
        <div id="dayo"></div>
    </body>   
</html>

接著,我們在dayo裡面寫點內容(content)

<div id="dayo">{{content}}</div>

然後我們將這個message代換為Hello Vue

<script>
var vm = new Vue({
  el: '#dayo',
  data: {
    content: 'Hello Vue!'
  }
})
</script>

所以可以想像的現在的網頁變成

<div id="dayo">Hello Vue!</div>

就會出現一個網頁寫Hello Vue囉!

有感覺後,故事才剛開始

我們可以在這短短的幾行code得知

  • 用兩個大括號 {{}} 可以幫我們替換資料,像是Smarty一樣
  • id用el(element)元素接,要加上#跟css, jqm等寫法一樣
  • vm=new Vue是什麼? 我們可以想像有台vm不停監視著我們的網頁,一發現相對應的變數代換就會立刻幫我們完成

STEP 3 - Add an array # []

我們先增加一個why,裡面放這次的參加原因,那我的原因有很多 - 好玩、有趣、和大家分享

 data: {
    content: "Hello Vue!",
    why:["好玩","有趣","和大家分享"]
  }

接著,我們將剛剛定義好的why動態更新至我們的HTML,這邊矩陣使用的方式一樣,用中括號[]、index從0開始

  <div id="dayo">
  {{content}}
  <p>為甚麼參加IT邦? {{why[0]}}</p>
  <p>參加可以幹嘛? {{why[2]}}</p>
  </div>

登愣!


我們的結果就出來囉,是不是很簡單呢,那我們繼續看下去...

STEP 4 - 資料太多不用怕 # v-for

我們的data一樣

 data: {
    content: "Hello Vue!",
    why:["好玩","有趣","和大家分享"]
  }

但是這次我們的HTML內要改放v-for,他的使用方法是 a in b,b是我們原本在data裡開的array,那a就是index去run這個array,寫法如下:

<div id="dayo">{{content}}
<p>為甚麼參加IT邦?</p> 
<ul>
<li v-for="reasons in why">{{reasons}}</li>
</div>

可想而知,這個for在網頁上會解析成

<ul>
<li>好玩</li>
<li>有趣</li>
<li>和大家分享</li>
</ul>

如圖

這種方法是不是很方便呢,再多的資料都能用for完成
那今天我們先到這邊,消化一下,Vue還有很多功能,讓我們一天一天來練習

讓我們把今天學會的做個紀錄

  • import Vue by CDN
  • use {{}}
  • use array in Vue
  • use v-for in Vue

下課囉 ~ 請鎖定 柚子放學後的網頁生活


上一篇
[Day7] 柚子放學後的網頁生活 - ES6 #3
下一篇
[Day9] 柚子放學後的網頁生活 - Django intro
系列文
🍐放學後的網頁開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言